<template>
  <div class="divWarehouse outDetails">
    <el-collapse
      v-model="activeNames"
    >
      <el-collapse-item
        title="基础信息"
        name="1"
      >
        <div class="main">
          <div class="divSteps">
            <el-steps
              :active="baseData.status"
              finish-status="success"
            >
              <el-step
                v-for="(item,i) in statusData"
                :key="i"
                :title="item.label"
                :description="item.time"
              >
              </el-step>
            </el-steps>
          </div>
          <div class="baseInfo">
            <el-row :gutter="30">
              <el-col :span="6">
                <p>盘点单号</p>
                <p>{{baseData.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>创建时间</p>
                <p>{{baseData.createTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>计划盘点时间</p>
                <p>{{baseData.planCheckTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点原因</p>
                <p>{{baseData.reason === 'GH' ? '规划' :baseData.reason === 'HZ' ? '货主' :'差异'}}</p>
              </el-col>
            </el-row>
            <el-row
              :gutter="30"
              style="padding-top:20px"
            >

              <el-col :span="6">
                <p>盘点维度</p>
                <p>{{baseData.dimension === 'KW' ? '库位' : '货品'}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点类型</p>
                <p>{{baseData.type === 'SJPD' ? '随机盘点' : '计划盘点'}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点仓库</p>
                <p>{{baseData.warehouseName}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点库区</p>
                <p>{{baseData.areaName}}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="盘点清单"
        name="2"
        v-if="baseData.status !==6 "
      >
        <div class="main">
          <!-- 表格数据 -->
          <div v-if="listData.length>0">
            <div class="infoTip">总计：{{baseData.locationTotal}}个库位 {{baseData.goodsTotal}}个货品</div>
            <el-table
              :data="listData"
              stripe
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="68"
              />
              <el-table-column
                prop="warehouseName"
                align="center"
                label="仓库名称"
                width="160"
              />
              <el-table-column
                prop="areaName"
                align="center"
                label="库区名称"
                width="160"
              />
              <el-table-column
                prop="locationName"
                align="center"
                label="库位名称"
                width="160"
              />
              <el-table-column
                prop="goodsName"
                align="center"
                label="货品名称"
              />
              <el-table-column
                prop="goodsCode"
                align="center"
                label="货品编码"
                width="160"
              />
              <el-table-column
                prop="goodsBarCode"
                align="center"
                label="货品条码"
                width="160"
              />
              <el-table-column
                prop="ownerName"
                align="center"
                label="货主名称"
              />
              <el-table-column
                prop="stockNum"
                align="center"
                label="库存数量"
                width="160"
              />
            </el-table>
            <!-- end -->
            <!-- 分页 -->
            <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
            <!-- end -->
          </div>
          <div
            v-else
            class="emptyTip"
          >
            <span class="imgIcon"></span>
            <p>暂无入库单</p>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="盘点任务"
        name="3"
        v-if="baseData.status !==6 "
      >
        <div class="main">
          <div class="infoTip">一盘</div>
          <div class="baseInfo">
            <el-row :gutter="30">
              <el-col :span="6">
                <p>任务编号</p>
                <p>{{checkTaskEntity1Data.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点次数</p>
                <p>{{checkTaskEntity1Data.checkNum}}</p>
              </el-col>
              <el-col :span="6">
                <p>任务状态</p>
                <p><span v-if="checkTaskEntity1Data.status===1">待分配</span><span v-if="checkTaskEntity1Data.status===2">盘点中</span><span v-if="checkTaskEntity1Data.status===3">盘点已完成</span><span v-if="checkTaskEntity1Data.status===4">已生成损益</span></p>
              </el-col>
              <el-col :span="6">
                <p>开始时间</p>
                <p>{{checkTaskEntity1Data.createTime}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="30"  style="padding-top:20px">
              <el-col :span="6">
                <p>完成时间</p>
                <p>{{checkTaskEntity1Data.updateTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点人</p>
                <p>{{checkTaskEntity1Data.personName}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点数量</p>
                <p>{{checkTaskEntity1Data.checkTotal}}</p>
              </el-col>
              <el-col :span="6">
                <p>损益合计</p>
                <p>{{baseData.id1Money}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="30"  style="padding-top:20px" v-if="loseProfitData.tableData.length >0">
              <el-col :span="6">
                <p>损益明细</p>
              </el-col>
            </el-row>
            <div class="divLoseProfit" v-if="loseProfitData.tableData.length >0" style="padding-top:20px">
                <el-table
                :data="loseProfitData.realData"
                stripe
                border
                style="width: 100%"
                >
                <el-table-column
                    prop="code"
                    align="center"
                    label="损益单号"
                    width="160"
                />
                <el-table-column
                    prop="warehouseName"
                    align="center"
                    label="仓库名称"
                    width="160"
                />
                <el-table-column
                    prop="areaName"
                    align="center"
                    label="库区名称"
                    width="160"
                />
                <el-table-column
                    prop="locationName"
                    align="center"
                    label="库位名称"
                    width="160"
                />
                <el-table-column
                    prop="ownerName"
                    align="center"
                    label="货主名称"
                    width="160"
                />
                <el-table-column
                    prop="goodsName"
                    align="center"
                    label="货品名称"
                    width="160"
                />
                <el-table-column
                    prop="idNum"
                    align="center"
                    label="损益数量"
                    width="180"
                />
                <el-table-column
                    prop="idMoney"
                    align="center"
                    label="损益金额（元）"
                    width="160"
                />
                <el-table-column
                    prop="updateTime"
                    align="center"
                    label="处理时间"
                    width="160"
                />
                <el-table-column
                    prop="status"
                    align="center"
                    label="损益单状态"
                    width="160"
                >
                    <template slot-scope="{row}">
                    <span v-if="row.status === 1">新建</span>
                    <span v-if="row.status === 2">已调整</span>
                    </template>
                </el-table-column>
                </el-table>
                <base-pagination  :currentPage ="loseProfitData.paging.current"  :total="loseProfitData.paging.total" :limit="loseProfitData.paging.size" @current-change="handleLoseProfitCurrentChange"  @size-change="handleLoseProfitSizeChange"></base-pagination>
            </div>
          </div>
          <div class="infoTip"
            v-if="checkTaskEntity2Data"
          >复盘</div>
          <div
            class="baseInfo"
            v-if="checkTaskEntity2Data"
          >
            <el-row :gutter="30">
              <el-col :span="6">
                <p>任务编号</p>
                <p>{{checkTaskEntity2Data.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点次数</p>
                <p>{{checkTaskEntity2Data.checkNum}}</p>
              </el-col>
              <el-col :span="6">
                <p>任务状态</p>
                <p><span v-if="checkTaskEntity2Data.status===1">待分配</span><span v-if="checkTaskEntity2Data.status===2">盘点中</span><span v-if="checkTaskEntity2Data.status===3">盘点已完成</span><span v-if="checkTaskEntity2Data.status===4">已生成损益</span></p>
              </el-col>
              <el-col :span="6">
                <p>开始时间</p>
                <p>{{checkTaskEntity2Data.createTime}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="30"  style="padding-top:20px">
              <el-col :span="6">
                <p>完成时间</p>
                <p>{{checkTaskEntity2Data.updateTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点人</p>
                <p>{{checkTaskEntity2Data.personName}}</p>
              </el-col>
              <el-col :span="6">
                <p>盘点数量</p>
                <p>{{checkTaskEntity2Data.checkTotal}}</p>
              </el-col>
              <el-col :span="6">
                <p>损益合计</p>
                <p>{{baseData.id2Money}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="30"  style="padding-top:20px" v-if="loseProfitData2.tableData.length >0">
              <el-col :span="6">
                <p>损益明细</p>
              </el-col>
            </el-row>
            <div class="divLoseProfit" v-if="loseProfitData2.tableData.length >0" style="padding-top:20px">
                <el-table
                :data="loseProfitData2.realData"
                stripe
                border
                style="width: 100%"
                >
                <el-table-column
                    prop="code"
                    align="center"
                    label="损益单号"
                    width="160"
                />
                <el-table-column
                    prop="warehouseName"
                    align="center"
                    label="仓库名称"
                    width="160"
                />
                <el-table-column
                    prop="areaName"
                    align="center"
                    label="库区名称"
                    width="160"
                />
                <el-table-column
                    prop="locationName"
                    align="center"
                    label="库位名称"
                    width="160"
                />
                <el-table-column
                    prop="ownerName"
                    align="center"
                    label="货主名称"
                    width="160"
                />
                <el-table-column
                    prop="goodsName"
                    align="center"
                    label="货品名称"
                    width="160"
                />
                <el-table-column
                    prop="idNum"
                    align="center"
                    label="损益数量"
                    width="180"
                />
                <el-table-column
                    prop="idMoney"
                    align="center"
                    label="损益金额（元）"
                    width="160"
                />
                <el-table-column
                    prop="updateTime"
                    align="center"
                    label="处理时间"
                    width="160"
                />
                <el-table-column
                    prop="status"
                    align="center"
                    label="损益单状态"
                    width="160"
                >
                    <template slot-scope="{row}">
                    <span v-if="row.status === 1">新建</span>
                    <span v-if="row.status === 2">已调整</span>
                    </template>
                </el-table-column>
                </el-table>
                <base-pagination :total="loseProfitData2.paging.total" :limit="loseProfitData2.paging.size" @current-change="handleLoseProfit2CurrentChange"  @size-change="handleLoseProfit2SizeChange"></base-pagination>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// 公用组件
// 分页
import BasePagination from '@/components/base-pagination/index.vue'
// 基础数据
import { checkStepSuccessOptions, checkStepCancleOptions, checkStepLoseProfitOptions } from '@/utils/common-select-data'
// api数据接口
import { getCheckDetail } from '@/module-storage/api/check'
import { findCheckListDetailsPaging } from '@/module-storage/api/check-list'
import { ICommonSelectOptions, IStepsOptions } from '@/utils/common-interface'

@Component({
  name: 'ListOutDetails',
  components: {
    BasePagination
  }
})
export default class extends Vue {
  private activeNames = ['1']
  private baseData = {}
  private statusData = []
  private listData = []
  private activeStep = 0
  private ownerData = {}
  private checkTaskEntity1Data = {}
  private checkTaskEntity2Data = {}
  private paging = {
    current: 1, // 当前页码
    size: 10, // 每页数据量
    total: 0
  }

  // 一盘损益数据
  private loseProfitData = {
    tableData: [],
    realData: [],
    paging: {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    }
  }

  // 复盘损益数据
  private loseProfitData2 = {
    tableData: [],
    realData: [],
    paging: {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    }
  }

  created() {
    this.getDitails()
  }

  // 功能
  private async getList() {
    const params = {
      current: this.paging.current,
      size: this.paging.size,
      masterId: this.$route.params.id,
      status: 1 as any
    }
    if (this.checkTaskEntity2Data) {
      params.status = 2
    }
    const { data } = await findCheckListDetailsPaging(params)
    this.listData = data.records
    this.paging.total = parseInt(data.total, 10)
  }

  private handleCurrentChange(page:number) {
    this.paging.current = page
    this.getList()
  }

  private handleSizeChange(page:number) {
    this.paging.size = page
    this.paging.current = 1
    this.getList()
  }

  private handleLoseProfitCurrentChange(page:number) {
    this.loseProfitData.paging.current = page
    const loseProfitData = this.loseProfitData
    this.loseProfitData.realData = loseProfitData.tableData.slice(loseProfitData.paging.size * (page - 1), loseProfitData.paging.size * page)
  }

  private handleLoseProfitSizeChange(page:number) {
    this.loseProfitData.paging.size = page
    this.loseProfitData.paging.current = 1
    this.loseProfitData.realData = this.loseProfitData.tableData.slice(0, page)
  }

  private handleLoseProfit2CurrentChange(page:number) {
    this.loseProfitData2.paging.current = page
    const loseProfitData = this.loseProfitData2
    this.loseProfitData2.realData = loseProfitData.tableData.slice(loseProfitData.paging.size * (page - 1), loseProfitData.paging.size * page)
  }

  private handleLoseProfit2SizeChange(page:number) {
    this.loseProfitData2.paging.size = page
    this.loseProfitData2.paging.current = 1
    this.loseProfitData2.realData = this.loseProfitData2.tableData.slice(0, page)
  }

  private async getDitails() {
    const id = this.$route.params.id
    if (id !== '') {
      const { data } = await getCheckDetail(id)
      this.baseData = data
      this.ownerData = data.owner ? data.owner : {}
      this.checkTaskEntity1Data = data.checkTaskEntity1 ? data.checkTaskEntity1 : {}
      this.checkTaskEntity2Data = data.checkTaskEntity2
      const dataArr: any = []
      let stepOptions = checkStepSuccessOptions
      if (data.status === 6) {
        stepOptions = checkStepCancleOptions
      }
      if (data.status === 3 && data.id1List && data.id1List.length > 0) {
        stepOptions = checkStepLoseProfitOptions
      }
      stepOptions.forEach((item: ICommonSelectOptions, i: number) => {
        const obj = { label: item.label }as IStepsOptions
        (this.baseData as any).timeArray.forEach((val: any, n: any) => {
          if (i === n) {
            obj.time = val
          }
        })
        dataArr.push(obj)
      })
      this.statusData = dataArr
      // 生成损益明细表格数据
      this.loseProfitData.tableData = data.id1List ? data.id1List : []
      this.loseProfitData.paging.total = this.loseProfitData.tableData.length

      this.handleLoseProfitSizeChange(10)
      // 生成2盘损益明细表格
      this.loseProfitData2.tableData = data.id2List ? data.id2List : []
      this.loseProfitData2.paging.total = this.loseProfitData2.tableData.length
      this.handleLoseProfit2SizeChange(10)
      this.getList()
    }
  }
}
</script>

<style scoped>
.divSteps {
  width: 70%;
  margin: 22px auto 37px;
}
</style>
